import styled from 'styled-components'

interface WrapProps {
	isCascade: boolean
	nestingLevel: number
	isVip: boolean
	isOnline: boolean
	isMeeting: boolean
	isSelected: boolean
	isAll: boolean
}
export const StyledMemberList = styled.div<{ height?: number }>`
	min-width: 213px;
	.member-tab {
		.kd-tab-item {
			width: 105px;
		}
	}
	.member-list {
		height: ${(props) => props.height ?? 390}px;
		overflow: auto;
		.list-item {
			height: 34px;
			line-height: 34px;
			cursor: pointer;
			user-select: none;
			.name {
				margin-left: 10px;
			}
		}
	}
`
export const ItemLabelWrap = styled.div.attrs(({ isSelected }: WrapProps) => {
	return { className: `${isSelected ? 'selected' : ''}` }
})<WrapProps>`
	display: flex;
	flex: 1;
	align-items: center;
	height: 36px;
	box-sizing: border-box;
	padding-left: ${(props) => {
		if (props.isCascade && props.isAll) {
			if (props.isOnline && props.isMeeting) {
				return `${props.nestingLevel * 12 + 4}px`
			} else {
				return `${props.nestingLevel * 12 + (props.nestingLevel > 0 ? 22 : 0) + 4}px`
			}
		} else {
			return 0
		}
	}};
	overflow: hidden;
	user-select: none;
	cursor: pointer;
	.icon-toggle {
		flex: 0 0 14px;
		margin-right: 7px;
	}
	.avatar {
		flex: 0 0 24px;
		display: flex;
		align-items: center;
		position: relative;
		margin-right: 8px;
		.icon-often {
			position: absolute;
			bottom: -2px;
			right: 0;
		}
	}
	.name {
		color: ${(props) => (props.isOnline ? `#000` : `#959697`)};
		overflow: hidden;
		&.active-polling {
			color: #2bb7ff;
			font-weight: bold;
		}
		pre {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
`
